<template>
    <el-form inline="true" class="search-form">
      <el-form-item label="用户id" :error="userIdError">
        <el-input 
          v-model="params.userId" 
          placeholder="请您输入要搜索的用户id" 
          @input="validateUserId"
        />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="params.nickName" placeholder="请您输入要搜索的用户昵称" />
      </el-form-item>
      <el-form-item>
        <el-button plain @click="onSearch" :class="{ 'loading': searchLoading }">
          <el-icon v-if="searchLoading" class="is-loading"><Loading /></el-icon>
          <el-icon v-else><Search /></el-icon>
          搜索
        </el-button>
        <el-button plain type="info" @click="onReset" :class="{ 'loading': resetLoading }">
          <el-icon v-if="resetLoading" class="is-loading"><Loading /></el-icon>
          <el-icon v-else><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table height="526px" :data="userList">
      <el-table-column prop="userId" label="用户id" width="180px" />
      <el-table-column prop="nickName" label="用户昵称" />
      <el-table-column prop="sex" label="用户性别">
        <template #default="{ row }">
          <div v-if="row.sex === 1" style="color:#3EC8FF;">男</div>
          <div v-if="row.sex === 2" style="color:#FD4C40;">女</div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" width="120px" label="手机号" />
      <el-table-column prop="email" width="120px" label="邮箱" />
      <el-table-column prop="wechat" width="120px" label="微信号" />
      <el-table-column prop="schoolName" width="120px" label="学校" />
      <el-table-column prop="majorName" width="120px" label="专业" />
      <el-table-column prop="introduce" label="个人介绍" />
      <el-table-column prop="status" width="90px" label="用户状态">
        <template #default="{ row }">
          <transition name="fade-status" mode="out-in">
            <el-tag :key="row.status" :type="row.status === 0 ? 'success' : 'danger'">
              {{ row.status === 0 ? '正常' : '拉黑' }}
            </el-tag>
          </transition>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px" fixed="right">
        <template #default="{ row }">
          <el-button class="red" v-if="row.status === 0" type="text" plain
            @click="onUpdateUserStatus(row.userId, 1)">拉黑</el-button>
          <el-button v-if="row.status === 1" type="text" plain @click="onUpdateUserStatus(row.userId, 0)">解禁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </template>
  
  <script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { getUserListService, updateStatusService } from '@/apis/cuser'
  import { ElMessage } from 'element-plus'
  import { Search, Refresh, Loading } from "@element-plus/icons-vue"
  
  const params = reactive({
    pageNum: 1,
    pageSize: 10,
    userId: '',
    nickName: '',
  })
  
  const userIdError = ref('')
  
  // 验证用户ID是否为数字
  function validateUserId(value) {
    if (value && !/^\d*$/.test(value)) {
      userIdError.value = '用户ID必须为数字'
      params.userId = value.replace(/\D/g, '') // 自动移除非数字字符
      ElMessage.warning('用户ID只能输入数字')
    } else {
      userIdError.value = ''
    }
  }
  
  const userList = ref([])
  const total = ref(0)
  const searchLoading = ref(false)
  const resetLoading = ref(false)
  const tableLoading = ref(false)
  
  async function getUserList() {
    tableLoading.value = true
    try {
      const result = await getUserListService(params)
      userList.value = result.rows
      total.value = result.total
    } catch (error) {
      ElMessage.error('获取用户列表失败')
    } finally {
      tableLoading.value = false
    }
  }
  
  // 组件挂载时自动获取用户列表
  onMounted(() => {
    getUserList()
  })
  
  async function onSearch() {
    if (params.userId && !/^\d+$/.test(params.userId)) {
      ElMessage.error('请输入正确的用户ID')
      return
    }
    
    searchLoading.value = true
    try {
      params.pageNum = 1
      await getUserList()
    } finally {
      searchLoading.value = false
    }
  }
  
  async function onReset() {
    resetLoading.value = true
    try {
      params.pageNum = 1
      params.pageSize = 10
      params.userId = ''
      params.nickName = ''
      await getUserList()
    } finally {
      resetLoading.value = false
    }
  }
  
  function handleSizeChange(newSize) {
    params.pageNum = 1
    getUserList()
  }
  
  function handleCurrentChange(newPage) {
    getUserList()
  }
  
  async function onUpdateUserStatus(userId, status) {
    try {
      await updateStatusService(userId, status)
      ElMessage.success(status === 1 ? '用户已拉黑' : '用户已解禁')
      getUserList()
    } catch (error) {
      ElMessage.error('操作失败，请重试')
    }
  }
  </script>

  <style scoped>
  .red {
    color: #F56C6C;
  }

  .fade-status-enter-active,
  .fade-status-leave-active {
    transition: all 0.3s ease;
  }

  .fade-status-enter-from,
  .fade-status-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  .fade-status-enter-to,
  .fade-status-leave-from {
    opacity: 1;
    transform: translateY(0);
  }
  </style>
  
  <style scoped>
  .search-form {
    margin-bottom: 20px;
  }
  
  .loading {
    pointer-events: none;
    opacity: 0.8;
  }
  
  .el-form-item.is-error .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--el-color-danger) !important;
  }
  </style>